<template>
    <div>
        <el-page-header @back="gotoback" title="返回">
            <template #content>
                <el-breadcrumb-item :to="{ path: '/practice/task' }">任务·详情</el-breadcrumb-item>
            </template>
        </el-page-header>
    </div>
    <div class="header">
        <el-row>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">名称</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">难度</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.name }}
                    </el-tag>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.lv }}
                    </el-tag>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">标签</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">使用次数</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.labels }}
                    </el-tag>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.useCount }}
                    </el-tag>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">发布</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">禁用</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag :type="datas.isPublish ? '' : 'warning'" class="tag">
                        {{ datas.isPublish == 1 ? '是' : '否' }}
                    </el-tag>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag :type="datas.isBan ? '' : 'warning'" class="tag">
                        {{ datas.isBan == 1 ? '是' : '否' }}
                    </el-tag>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">时间</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">描述</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.time }}
                    </el-tag>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">

                    </el-tag>
                </div>
            </el-col>
        </el-row>

    </div>
    <div class="find">
        <span class="spans">任务详情</span>
    </div>
    <el-tabs type="border-card">
        <div v-for="item in tableData" :key="item">
            <el-tab-pane>
                <template #label>
                    <span>
                        <span>任务{{ item.no }}</span>
                    </span>
                </template>
                <el-row>
                    <el-col :span="12">
                        <div class="back-ground wich">
                            <span class="span">是否固定题目</span>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="back-ground wich">
                            <span class="span">达标正确率(最少为20%)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="back-ground">
                            <el-tag :type="item.isFixed == 0 ? '' : 'warning'" class="tag">
                                {{ item.isFixed == 0 ? '否' : '是' }}
                            </el-tag>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="back-ground">
                            <el-tag class="tag">
                                {{ item.rightPercent }}
                            </el-tag>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <div class="back-ground wich" v-if="item.isFixed == 0">
                            <span class="span">难度区间(1-10)</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="back-ground wich" v-if="item.isFixed == 0">
                            <span class="span">达标题目数(最少10道题)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="back-ground" v-if="item.isFixed == 0">
                            <el-tag class="tag">
                                {{ item.minLv }}-{{ item.maxLv }}
                            </el-tag>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="back-ground" v-if="item.isFixed == 0">
                            <el-tag class="tag">
                                {{ item.limitCount }}
                            </el-tag>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="back-ground wich" v-if="item.isFixed == 1">
                            <span class="span">任务试题(最少为10道题)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="back-ground" v-if="item.isFixed == 1" style="height: 52vh;">
                            <el-table row-key="id" border height="53vh" :data="item.questions" ref="myTable"
                                style="width: 100%; text-align: center">
                                <el-table-column label="序号" type="index" align="center" width="60" fixed />
                                <el-table-column label="题干" prop="content" align="center" />
                                <el-table-column label="难度" prop="lv" align="center" />
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="back-ground wich" v-if="item.isFixed == 0">
                            <span class="span">题库约束(最多可选5个题库)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="back-ground">
                            <div style="margin-top: 1.5vh;" v-if="item.isFixed == 0">
                                <el-tag v-if="item.questionBanks == ''">无</el-tag>
                                <el-tag v-else>{{ item.questionBanks }}</el-tag>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </div>
    </el-tabs>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
import { GetSingleTask } from '../../../api/practice/task/index'
import { useRoute } from 'vue-router';

export default defineComponent({
    setup() {
        const route = useRoute();
        const data = reactive({
            datas: {
                name: '',//名称
                lv: "",//难度
                labels: '',//标签
                useCount: '',//使用次数
                isPublish: '',//发布
                isBan: '',//禁用
                time: '',//时间
            },
            tableData: [] as any,
            count: 0
        })
        const events = {
            data() {
                GetSingleTask({
                    id: route.params.id
                }).then((res: any) => {
                    console.log('详情----', res)
                    data.datas = res.data
                    res.data.details.forEach((item: any) => {
                        //获取数据
                        data.tableData.push(item);
                    })
                    console.log("----------", data.tableData)
                    data.count = res.data.details.length;

                })
            },
            //返回上一级
            gotoback() {
                window.history.go(-1)
            },
        }
        onMounted(() => {
            events.data()
        })
        return {
            ...toRefs(data),
            ...events,
        }
    },
})
</script>
<style scoped>
.header {
    border: #ccc solid 1px;
    margin-top: 2vh;
    border-radius: 5px;
}

.back-ground {
    border: #efebeb solid 1px;
    height: 50px;
}

.wich {
    background-color: rgba(240, 239, 245, 0.479);
}

.span {
    float: left;
    margin-top: 2vh;
    margin-left: 1vh;
    color: #c4c7d0;
}

.tag {
    float: left;
    margin-top: 15px;
    margin-left: 10px;
}

.find {
    background-color: rgb(199, 206, 216);
    height: 30px;
    width: 120px;
    border-radius: 15px;
    margin-left: -2vh;
    margin-top: 2vh;
    padding-top: 4px;
}

.spans {
    color: white;
}
</style>
